<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <div class="magazine">
  <!-- 在网格布局中 所有的项目都是平级的 -->
    <!-- 区域1 -->
    <div class="item green">
      <div class="subtitle">featured article</div>
      <h1>Divinity: Original Sin 2</h1>
    </div>
    <!-- 区域2 -->
    <div class="item blue">
      <h2>the best table top minus the table</h2>
      <div class="submit">by fraser brown</div>
      <p>
        Bacon ipsum dolor amet cupim buffalo shankle, ham fatback turducken drumstick sirloin. Jowl buffalo venison shank pork belly alcatra, tenderloin bacon ribeye picanha spare ribs fatback ham hock. Sirloin pork pancetta, landjaeger ham hock biltong meatloaf
        brisket shoulder. Filet mignon ground round chuck turkey rump capicola.
      </p>
      <p>
        Flank fatback bacon jerky picanha brisket ball tip cupim. Jerky fatback shankle andouille picanha cupim pancetta pork chop tongue corned beef pork loin ham hock rump tri-tip t-bone. Meatball turducken burgdoggen cupim salami bresaola. Boudin turkey bresaola,
        short ribs ribeye short loin meatloaf corned beef picanha t-bone. Fatback beef cupim pork chop.
      </p>
      <p>
        Tail short loin tenderloin turducken. Pancetta bacon beef ribs turducken leberkas. Biltong kevin buffalo porchetta, chicken meatloaf doner chuck sirloin shankle swine. Boudin bacon chicken, cupim filet mignon salami venison chuck tongue ham tenderloin
        cow.
        Chuck doner ham, chicken burgdoggen jerky short ribs picanha rump tenderloin ground round boudin cow shoulder beef.
      </p>
      <p>
        Doner ribeye flank shankle bacon. Alcatra shoulder buffalo cow short loin shankle. Chicken chuck beef rump pork chop pork belly pork loin leberkas filet mignon kielbasa meatloaf andouille meatball. Burgdoggen sausage hamburger, drumstick prosciutto meatball
        buffalo pork belly ground round shoulder. Brisket filet mignon meatloaf, shankle salami jerky flank pig kevin porchetta sirloin. Brisket meatloaf andouille burgdoggen sirloin pancetta. Burgdoggen capicola leberkas picanha tail.
      </p>
    </div>
    <!-- 区域3 -->
    <div class="item purple">
      <p>
        Bacon ipsum dolor amet cupim buffalo shankle, ham fatback turducken drumstick sirloin. Jowl buffalo venison shank pork belly alcatra, tenderloin bacon ribeye picanha spare ribs fatback ham hock. Sirloin pork pancetta, landjaeger ham hock biltong meatloaf
        brisket shoulder. Filet mignon ground round chuck turkey rump capicola.
      </p>
      <p>
        Flank fatback bacon jerky picanha brisket ball tip cupim. Jerky fatback shankle andouille picanha cupim pancetta pork chop tongue corned beef pork loin ham hock rump tri-tip t-bone. Meatball turducken burgdoggen cupim salami bresaola. Boudin turkey bresaola,
        short ribs ribeye short loin meatloaf corned beef picanha t-bone. Fatback beef cupim pork chop.
      </p>
    </div>
    <!-- 区域4 -->
    <div class="item orange">
      <h4>score: 92</h4>
      <ul>
        <li>compelling story</li>
        <li>entertaining co-op</li>
        <li>innovative 'gm mode'</li>
      </ul>
    </div>
    <!-- 区域5 -->
    <div class="item meired">
      <figure>
        <img src="https://picsum.photos/1386/1013?random=1" alt="">
      </figure>
    </div>
    <!-- 区域6 -->
    <div class="item black">
      <p>We both died. Twice. But I still felt really good about my decision.</p>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

figure {
  margin: 0;
}

.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;

  .magazine {
    width: 95vw;
    display: grid;
    grid-template-rows: 130px 2fr 1fr;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr ;

    .item {
      .subtitle {
        font-size: calc(10px + 0.6vw);
      }
      // 开始放置各个网格项目
      &.green {
        grid-row: 1;
        grid-column: 1 / 3;

        display: grid;
        z-index: 1;

        background: #f4d434;
        justify-content: start;
        align-items: end;
        text-transform: uppercase;
        font-weight: bold;
        font-size: calc(10px + 2.6vw);
        padding-left: 20px;

        h1 {
          margin: 0 0 0.5vw;
          font-size: inherit;
        }
      }

      &.blue {
        grid-row: 2 / 4;
        grid-column: 1 / 2;

        overflow: hidden;
        padding: 10px 20px;
        font-size: 14px;

        h2 {
          font-size: calc(10px + 0.8vw);
          magin-bottom: 10px;
          text-transform: uppercase;
        }

        p {
          font-size: 14px;
          margin-bottom: 1rem;
          line-height: 1.5;
        }

        .submit {
          text-transform: uppercase;
          margin-bottom: 20px;
          margin-top: 10px;
        }
      }

      &.meired {
        grid-row: 1 / 3;
        grid-column: 2 / 5;
        figure {
          margin: 0;
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }

      &.purple {
        grid-row: 3 / 4;
        grid-column: 2 / 4;

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 30px;
        align-items: start;
        padding: 10px 20px;
        font-size: 14px;

        p {
          font-size: 14px;
          margin-bottom: 1rem;
          line-height: 1.5;
        }
      }

      &.orange {
        grid-row: 3;
        background: #f4d434;
        width: 70%;
        height: 70%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        padding: 5px;
        font-size: calc(12px + 2.6vw);
        font-weight: bold;
        text-transform: uppercase;

        ul {
          list-style: none outside none;
          font-size: calc(10px + 0.6vw);

          li {
            display: flex;
            align-items: center;
            gap: 5px;

            &:not(:last-child) {
              margin-bottom: 1rem;
            }

            &::before {
              content: '';
              display: block;
              width: 20px;
              aspect-ratio: 16 / 9;
              background-color: currentColor;
              margin-left: -15px;
            }
          }
        }
      }

      &.black {
        grid-row: 2;
        grid-column: 4;
        z-index: 2;
        background: rgba(0, 0, 0, 0.5);
        align-self: end;
        justify-self: start;
        position: relative;
        color: #e5d54f;
        border-left: 10px solid #e5d54f;
        padding: 10px;
        right: 125px;
        bottom: 6%;
        text-transform: uppercase;
        font-size: calc(12px + 1.1vw);
      }
    }

  }
}
</style>
